<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>迁移图</title>
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="proj4" src="./static/libs/include-leaflet-local.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="map"></div>
<script>
    var BaiduCRS = new L.Proj.CRS(
        'EPSG:3395',
        '+proj=merc +lon_0=0 +k=1 +x_0=140 +y_0=-250 +datum=WGS84 +units=m +no_defs', {
            resolutions: function () {
                level = 19;
                var res = [];
                res[0] = Math.pow(2, 18);
                for (var i = 1; i < level; i++) {
                    res[i] = Math.pow(2, (18 - i))
                }
                return res;
            }(),
            origin: [0, 0],
            bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
        }
    );

    var light = new Zondy.Map.BaiduTileLayer({
        styles: 'light',
        baidukey: '5ssIAkexwFSGMatjOF95gg3sjet3yxQ1'
    });
    var dark = new Zondy.Map.BaiduTileLayer({
        styles: 'dark',
        baidukey: '5ssIAkexwFSGMatjOF95gg3sjet3yxQ1'
    });
    var visualization = new Zondy.Map.BaiduTileLayer({
        styles: 'visualization',
        baidukey: '5ssIAkexwFSGMatjOF95gg3sjet3yxQ1'
    });
    var redalert = new Zondy.Map.BaiduTileLayer({
        styles: 'redalert',
        baidukey: '5ssIAkexwFSGMatjOF95gg3sjet3yxQ1'
    });
    var grassgreen = new Zondy.Map.BaiduTileLayer({
        styles: 'grassgreen',
        baidukey: '5ssIAkexwFSGMatjOF95gg3sjet3yxQ1'
    });
    var pink = new Zondy.Map.BaiduTileLayer({
        styles: 'pink',
        baidukey: '5ssIAkexwFSGMatjOF95gg3sjet3yxQ1'
    });
    var bluish = new Zondy.Map.BaiduTileLayer({
        styles: 'bluish',
        baidukey: '5ssIAkexwFSGMatjOF95gg3sjet3yxQ1'
    });
    var darkgreen = new Zondy.Map.BaiduTileLayer({
        styles: 'darkgreen',
        baidukey: '5ssIAkexwFSGMatjOF95gg3sjet3yxQ1'
    });
    var grayscale = new Zondy.Map.BaiduTileLayer({
        styles: 'grayscale',
        baidukey: '5ssIAkexwFSGMatjOF95gg3sjet3yxQ1'
    });
    var hardedge = new Zondy.Map.BaiduTileLayer({
        styles: 'hardedge',
        baidukey: '5ssIAkexwFSGMatjOF95gg3sjet3yxQ1'
    });
    var midnight = new Zondy.Map.BaiduTileLayer({
        styles: 'midnight',
        baidukey: '5ssIAkexwFSGMatjOF95gg3sjet3yxQ1'
    });
    var pl = new Zondy.Map.BaiduTileLayer({
        styles: 'pl',
        baidukey: '5ssIAkexwFSGMatjOF95gg3sjet3yxQ1'
    });

    var baseMaps = {
        '默认': visualization,
        '白色风格': light,
        '黑夜风格': dark,
        '红色警戒风格': redalert,
        '自然绿风格': grassgreen,
        '浪漫粉风格': pink,
        '清新蓝风格': bluish,
        '青春绿风格': darkgreen,
        '高端灰风格': grayscale,
        '强边界风格': hardedge,
        '午夜蓝风格': midnight,
        '无风格': pl
    };

    var map = L.map('map', {
        crs: BaiduCRS,
        layers: [midnight]
    }).setView([29.578285, 106.563777], 5);

    L.control.layers(baseMaps).setPosition('topleft').addTo(map);
</script>


</body>

</html>